// ==UserScript==
// @name        make youtube live chat super duper cool
// @namespace   Youtube Scripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.20
// @author      chroma
// @description makes youtube chat more readable for plebs with one monitor (me)
// @downloadURL https://notabug.org/chroma/helveticachat-userscript/raw/master/helveticachat-userscript.js
// @icon        https://notabug.org/chroma/helveticachat-userscript/raw/master/icon.png
// ==/UserScript==

let style = `<style>
  /* HIDE YT WELCOME */
  yt-live-chat-viewer-engagement-message-renderer {
    display: none;
  }

  /* MESSAGES */
  yt-live-chat-renderer * {
    font-size: 18px !important;
    line-height: 20px !important;
    vertical-align: middle;
    
  }

  /* EMOTES */
  yt-live-chat-renderer img {
    zoom: 1;
  }
  
  /* MOD BADGES */
  .yt-live-chat-author-chip img {
    width: 24px;
    height: auto;
  }

    /* MOD NAMES */
  #author-name.moderator.yt-live-chat-author-chip {
    font-weight: 500 !important;
  }
    
  /* STREAMER NAME */
  yt-live-chat-author-chip[is-highlighted] #author-name.owner.yt-live-chat-author-chip, #author-name.owner.yt-live-chat-author-chip {
    background-color: transparent;
    color: white !important;
    padding: 0px;
  }
  
  /* BROADCASTER BADGE  */
  .owner:before {
    background-image: url('https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: "";
    transform: scale(1);
    vertical-align: sub;
    margin-right: 4px;
  }
  
  /* AVATAR NEAR INPUT */
  #avatar.yt-live-chat-message-input-renderer {
    display: none;
  }

  /* NAME NEAR INPUT */
  #input-container > yt-live-chat-author-chip {
    display: none;
  }

  /* ALTERNATING COLORS */
  yt-live-chat-text-message-renderer:nth-child(even) {
    background-color: #211F21;
  }
  
  /* REMOVE RIGHT MARGIN AFTER NAME */
  yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
  	margin-right: 0px !important;
  }

  </style>`
document.body.insertAdjacentHTML("beforeend", style)

document.getElementsByTagName('yt-live-chat-text-input-field-renderer')[0].completeEmojis = () => {}

betterTimestamp = (timestamp) =>  {
  let tsSplit = timestamp.split(':');
  if(!/\d+/.test(tsSplit[0]) || !(timestamp.slice(-2) == 'AM' || timestamp.slice(-2) == 'PM'))
    return timestamp;
  return (tsSplit[1].slice(-2) == 'AM'
    ? (tsSplit[0] == "12" ? "0" : tsSplit[0])
    : (tsSplit[0] == "12" ? "12" : Number(tsSplit[0])+12))
    + ":"
    + tsSplit[1].slice(0,-3);
}

const observer = new MutationObserver((mutationList) => {
  mutationList.forEach(mut => {
    mut.addedNodes.forEach(node => {
      let timestamp = node.querySelector("#timestamp");
      timestamp.textContent = betterTimestamp(timestamp.textContent);
    });
  });
});
for(el of document.getElementsByTagName("yt-live-chat-text-message-renderer")) {
  let timestamp = el.querySelector("#timestamp");
  timestamp.textContent = betterTimestamp(timestamp.textContent);
}
observer.observe(document.querySelector(".yt-live-chat-item-list-renderer #items"), {childList: true});
